<template>
	<view>
		<view v-for="item in list" :key="item.id" class="mine-pyq-box">
			<uv-text mode="date" :text="item.createtime" color="#999" size="12px"></uv-text>
			<view v-if="item.istop=='1'" class="mine-pyq-box_top">
				<image src="../../static/pyq03.png"></image>
			</view>
			<view class="margin-top-sm">{{item.content}}</view>
			<view v-if="item.imglist.length" class="margin-top-sm">
				<uv-album :urls="item.imglist" multipleSize="200rpx" :maxCount="3"></uv-album>
			</view>
			
			<view class="mine-pyq-box_bootom">
				<uv-icon class="commit" name="/static/pyq02.png" size="16" labelSize="13" :label="`评论 (${item.commcount})`"></uv-icon>
				<view class="zhiding">
					<uv-icon name="/static/pyq01.png" label="置顶" labelColor='#ff3600' size="16" labelSize="13" @click="handlesetTop(item)"></uv-icon>
				</view>
				
			</view>
		</view>

		<!-- <uv-load-more :status="status" @loadmore="loadMore" /> -->
		<uv-action-sheet ref="ref_action" cancelText="取消" :actions="topPackage" round="10" title="选择置顶"
			description='主页+搜索车友置顶优先显示,大幅提升车源曝光,并获得"置顶"标签,置顶剩余时长越长越靠前' @select="handleTop"></uv-action-sheet>
	</view>
</template>

<script>
	import { querySelfPyqInfo, buyTop } from '@/utils/http.js'
	import baseconfig from '@/config.js'
	import { mapState } from 'vuex'
	import{ timetobefor} from '@/common/tools.js'
	export default {
		data() {
			return {
				queryForm: {
					start: 0,
					length: 10,
				},
				list: [],
				total: 0,
				status: 'loadmore',
				selectpackage: {

				},
				wxcode: ''
			}
		},
		onLoad() {
			this.fetchData()
		},
		computed: {
			...mapState({ topPackage: state => state.syspackage.topPackage })
		},
		methods: {
			handlesetTop(item) {
				this.selectpackage = item
				let that = this
				uni.login({
					success(res) { 
						const { code } = res 
						that.wxcode = code
					}
				})
				this.$refs.ref_action.open()
			},
			async handleTop(e) {
				let that = this
				var parm = { type: 'pyq', id: this.selectpackage.id, topid: e.id, code: this.wxcode }
				const { data, code } = await buyTop(parm)
				const { appId, nonceStr, packageVal, paySign, signType, timestamp } = data
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: String(timestamp),
					nonceStr: nonceStr,
					package: packageVal,
					signType: signType,
					paySign: paySign,
					success: function(res) {
						uni.showToast({
							title: '支付成功',
						})
						that.fetchData()
					},
					fail: function(err) {
						uni.showToast({
							title: '支付失败',
							icon: 'fail'
						})
					}
				})
			},
			fetchData() {
				this.status = 'loading';
				querySelfPyqInfo().then(res => {
					const { total, rows, count } = res.data
					rows.map(arr => {
						arr.imglist = []
						arr.avatar = baseconfig.api_url + arr.userimgsrc
						if (arr.imgsrc) {
							var _list = arr.imgsrc.split(',')
							_list.forEach(imgarr => {
								arr.imglist.push(baseconfig.api_url + imgarr)
							})
						}
					})
					Object.assign(this.list, rows)
					this.total = total
					if ((this.queryForm.start + this.queryForm.length) >= total) {
						this.status = 'nomore'
					}
				})
			},
			loadMore() {
				if (this.status === 'loadmore') {
					this.queryForm.start = this.queryForm.start + this.queryForm.length
					this.fetchData()
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
	}
	.mine-pyq-box .uv-album__row__wrapper__text {
		border-radius: 6upx;
	}
	.mine-pyq-box {
		margin: 20upx;
		position: relative;
		background: #f8f8f8;
		padding: 20upx 20upx 0 20upx;
		border-radius: 10upx;
		&_top {
			position: absolute;
			right: 0;
			top: 0;
		}

		&_bootom {
			padding: 20upx 0px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.commit {
				flex: 1;
			}
		}

	}
	.zhiding {
		width: 126upx;
		border-radius: 30upx;
		border: 1upx solid #ff3600;
		text-align: center;
		padding: 6upx 0;
		padding-left: 12upx;
	}
	.mine-pyq-box_top image{
		width: 80upx;
		height: 80upx;
	}
	.uv-action-sheet__item-wrap__item__name{
		font-size: 13px !important;
	}
</style>